<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>前台用户列表</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				前台用户列表
			</div>
			<div class="pd10">		
				<el-form :inline="true" :model="formInline" class="demo-form-inline">	
					<el-form-item>
						<el-select v-model="formInline.gender" placeholder="性别">
							<el-option :label="item.label" :value="item.value" v-for="item in genderArr" :key="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="formInline.branch" placeholder="分行">
							<el-option :label="item.label" :value="item.value" v-for="item in branchArr" :key="item.label"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input v-model="formInline.account" type="text" placeholder="请输入考生账号"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="formInline.name" type="text" placeholder="请输入考生姓名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column prop="account" label="考生账号"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="gender" label="性别">
						<template slot-scope="scope">
							{{({"1":"男","2":"女"}[scope.row.gender])}}
						</template>
					</el-table-column>
					<el-table-column prop="branch" label="分行">
						<template slot-scope="scope">
							{{({"1":"建设分行"}[scope.row.branch])}}
						</template>
					</el-table-column>
					<el-table-column prop="province" label="地区"></el-table-column>
					<el-table-column prop="subbranch" label="支行"></el-table-column>
					<el-table-column prop="branches" label="网点"></el-table-column>
					<el-table-column prop="idcard" label="身份证号"></el-table-column>					
				</el-table>				
				<!-- 分页 -->
				<div class="bottomstate">
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>
		</div>
	</body>
	<script src="elementui-lib/lib/vue.js"></script>
	<script src="elementui-lib/lib/index.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					formInline:{
						gender:"",
						branch:"",
						account:"",
						name:""
					},
					genderArr:[{
						value: '1',
						label: '男'
					},{
						value: '1',
						label: '女'
					}],
					branchArr:[{
						value: '1',
						label: '建设分行'
					}],
					tableData: [{
						account:"15133482706",
						name:"张三",
						gender:"1",
						branch:"1",
						province:"石家庄",
						subbranch:"桥西区",
						branches:"裕西公园",
						idcard:"130124199001011234"
					},{
						account:"15133482706",
						name:"张三",
						gender:"1",
						branch:"1",
						province:"石家庄",
						subbranch:"桥西区",
						branches:"裕西公园",
						idcard:"130124199001011234"
					}],	
				}
			},
			methods: {
				search:function(){
					console.log(this.formInline)
				},				
			},
			created() {
				
			},
		});
	</script>
</html>
